<template>
  <div class="bar-list">
    <!-- <swiper :options="swiperOption">
      <swiper-slide>I'm Slide 1</swiper-slide>
      <swiper-slide>I'm Slide 2</swiper-slide>
      <swiper-slide>I'm Slide 3</swiper-slide>
      <div
        slot="pagination"
        class="swiper-pagination"/>
    </swiper> -->

    <div
      v-for="(tagItem, index) in tagBarList"
      v-show="tagBarList.length !== 0? true : false"
      :key="index"
      class="bar-list-box">
      <div
        :class="tagItem.isactive?'active':''"
        class="default"
        @click="changePage(tagItem.name, index)"
      >
        <span>{{ tagItem.title }}</span>
        <i
          class="el-icon-circle-close-outline"
          @click.stop="reduceItem(index)"/>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { StoreState } from '@/store'
import {mapState, mapMutations} from 'vuex'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {
  REDUCE_TAG_ITEM,
  CHANGE_ACTIVE,
  } from '@/store/mutation-types'
import ScrollPane from '../Tools/ScollPane/index.vue'
export default Vue.extend({
  components: {
    swiper,
    swiperSlide,
    ScrollPane,
  },
  data () {
    return {
      isCollapse: true,
      swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
        notNextTick: true,
          // swiper configs 所有的配置同swiper官方api配置
        autoplay: 3000,
        direction: 'vertical',
        grabCursor: true,
        setWrapperSize: true,
        autoHeight: true,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        prevButton: '.swiper-button-prev', //上一张
        nextButton: '.swiper-button-next', //下一张
        scrollbar: '.swiper-scrollbar', //滚动条
        mousewheelControl: true,
        observeParents: true,
          // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true,
      },
    }
  },
  computed: {
    ...mapState({
      tagBarList: (state: StoreState) => state.menuInfo.TagBar,
    }),
  },
  methods: {
    reduceItem (index:number) {
      this.$store.commit(REDUCE_TAG_ITEM, index)
      this.$router.push({
        name: this.tagBarList[0].name,
      })
    },
    changePage (name:string, index:number) {
      this.$store.commit(CHANGE_ACTIVE, index)
      this.$router.push({name})
    },
  },
})
</script>

<style lang="scss" scoped>
  .tags-view-wrapper {
    background: #fff;
    height: 34px;
    border-bottom: 1px solid #d8dce5;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
  }
  .bar-list {
    min-width: 100%;
    height: 60px;
    background-color: #ffffff;
    border-bottom: 1px solid #eaeaea;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    color: #333;
    overflow: hidden;
    overflow-x: auto;
    .bar-list-box {
      display: inline-block;
      height: 30px;
      overflow: hidden;
      .default {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0px 5px;
        background-color: #fff;
        color: #666;
        border: 1px solid #eaeaea;
        font-size: 12px;
        border-radius: 8px;
        margin-left: 10px;
        .cancle-img {
          width: 8px;
          height: 8px;
        }
      }
      .active {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0px 5px;
        background-color: rgb(66, 185, 131);
        color: #fff;
        border: 1px solid #eaeaea;
        font-size: 12px;
        border-radius: 8px;
      }
    }
  }
</style>
